{include file="common/head"/}
<div class="main">
	<br/>
	<fieldset class="layui-elem-field layui-field-title"><legend>商城码商列表</legend></fieldset>
	<div class="channel_box">
		<div class="item title"><span class="name">码商名称</span><span class="cionname">币种名称</span><span class="price">单价/CNY</span><span class="buyit">购买</span></div>
	</div> 

	<br/> 
	<fieldset class="layui-elem-field layui-field-title"><legend>提交表单DEMO</legend></fieldset>
	<div class="order_form">
		<form class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">码商通道</label>
				<div class="layui-input-block">
					<input type="text" name="title" id="title" lay-verify="required" autocomplete="off" readonly="" placeholder="请输选相应的币种" class="layui-input">
				</div>
				<input type="hidden" name="channelid" id="channelid" lay-verify="required" autocomplete="off" readonly="" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">币种名称</label>
				<div class="layui-input-block">
					<input type="text" name="cionname" id="cionname" lay-verify="required" autocomplete="off" readonly="" placeholder="自动填入" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单价/CNY</label>
				<div class="layui-input-block">
					<input type="text" name="price" id="price" lay-verify="required|number" autocomplete="off" readonly="" placeholder="自动填入" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">应付金额</label>
				<div class="layui-input-block">
					<input type="text" name="money" id="money" lay-verify="required|number" autocomplete="off" placeholder="自动计算" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">购买数量</label>
				<div class="layui-input-block">
					<input type="text" name="number" id="number" lay-verify="required|number" autocomplete="off"  readonly="" placeholder="您要购买的数量" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">支付方式</label>
				<div class="layui-input-block">
					<select name="paytype" id="paytype" lay-verify="required" lay-filter="paytype">
	                    <option value="">请选择支付方式</option>
	                </select> 
				</div>
			</div> 
	        <div class="layui-form-item">
	            <label class="layui-form-label">备注说明</label>
	            <div class="layui-input-block">
	                <input type="text" name="note" autocomplete="off" placeholder="可填写您支付所用的账号" class="layui-input">
	            </div>
	        </div>
			<div class="layui-form-item" style="text-align: center;"> 
                <a href="{:url('index')}" class="layui-btn layui-btn-primary">取消返回</a>
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">确认提交</button> 
			</div>
		</form>
	</div>
</div>
<script>
var shopid="{$shopid}";
var appid="{$appid}";
var shopurl="{$sys.url}";

layui.use(['form', 'layer'], function () {
	var layer = layui.layer;
	form = layui.form;
	$ = layui.jquery;
	$.get(shopurl+'shop/api/channels.html',{shopid:shopid,appid:appid,page:1,limit:15},function(rel) { 
	    var showbox=$('.channel_box'); 
	    if(rel.code=='0'){
	    	var list=rel.data;  
	    	for(var i in list){  
	    	 	showbox.append('<div class="item"><span class="name">'+list[i]['title']+'</span><span class="cionname">'+list[i]['cionname']+'</span><span class="price red">'+list[i]['price']+'</span><span class="buyit"><button class="buybtn" onclick="makeorder(this,'+list[i]['channelid']+')">购买</button></span></div>');
	    	}  
	    }else{
	    	showbox.append('<div class="item null">'+rel.msg+'</div>');
	    }
	});
	$("input[name^='money']").each(function(){
	    $(this).keyup(function(e){
	    	var price=$('#price').val();
	    	var money=$('#money').val();
	        getmoney(price,money);
	    }); 
	});
	//提交表单
	form.on('submit(submit)', function (data) {  
		var number=data.field.number;
		var channelid=data.field.channelid; 
		var paytype=data.field.paytype; 
		var note=data.field.note; 
        $.post(shopurl+'shop/api/makeorder.html',{shopid:shopid,appid:appid,number:number,channelid:channelid,paytype:paytype,note:note}, function (res) { 
            if (res.code == 0) {
                layer.msg(res.msg, {time:500, icon: 1}, function () {
                    location.href = res.payurl;
                });
            }else{
                layer.msg(res.msg, {time: 1800, icon: 2});
            }
        });
    }); 
});

function makeorder(dom,channelid){ 
    var buybtn =$(".buybtn"); 
	$.each(buybtn, function () {
        $(this).removeClass("select"); 
    }); 
	$(dom).addClass("select"); 
	$.get(shopurl+'shop/api/channelinfo.html',{shopid:shopid,appid:appid,channelid:channelid},function(rel) { 
		if(rel.code=='0'){  
			var paytype=rel.payinfo;  
			$('#paytype').empty();
	    	for(var i in paytype){  
	    	 	$('#paytype').append('<option value="'+paytype[i]['bankid']+'">'+paytype[i]['name']+'</option>');
	    	}  
		    form.render('select');  //重新渲染下拉 

			$('#title').val(rel.info.title); 
			$('#channelid').val(rel.info.channelid); 
			$('#cionname').val(rel.info.cionname); 
			$('#price').val(rel.info.price);
			var money=$('#money').val();   
			getmoney(rel.info.price,money);
		}      
	});  
}
function getmoney(price,money){ 
	if(money && price){
		// 自行精度计算
		var number=Number(money)/Number(price);
		var numbers = number.toFixed(2); 
		$('#number').val(numbers); 
	} 
}
</script> 
</body>
</html>